<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            padding-bottom: 40px;
            background-color: #fff;
        }

        .form-signin {
            width: 100%;
            max-width: 640px;
            margin: auto;
            padding: 15px;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 3px;
            font-size: 1rem;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .sr-only2 {
            margin-top: 15px;
        }


        .logodiv img {
            width: 240px;
            margin: 0 auto;
            display: block;
        }

        .logodiv {
            text-align: center;
        }

        .logodiv h1 {
            font-size: 1.4rem;
            color: #03357a;
            margin-top: 20px;
            margin-bottom: 50px;
        }

        .logodiv h2 {
            font-size: 1.5rem;
            margin-bottom: 80px;
        }



        .fgtpaws {
            text-align: center;
            margin-top: 10px;
        }

        .btn {
            padding-left: 0;
            padding-right: 0;
        }

        #barcode {
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="form-signin form-group1">




            <div class="d-flex bd-highlight align-items-center mt-5">
                <div class="p-2 flex-grow-1 bd-highlight">
                    <input type="text" id="api" style="font-size: 12px;" v-model="customapi"
                        class="form-control form-control-theme" placeholder="请输入打印机IP">
                </div>
            </div>










            <div class="form-group row action-row">
                <div class="col-4">
                    <button type="button" tapmode="" onclick="connect11();" class="btn btn-primary btn-action">连接</button>
                </div>
                <div class="col-4">
                    <button type="button" tapmode="" onclick="shareapp();"
                        class="btn btn-primary btn-action">打印测试1</button>
                </div>
                <div class="col-4">
                    <button type="button" tapmode="" onclick="shareapp3();"
                        class="btn btn-primary btn-action">打印测试2</button>
                </div>
                <div class="col-4">
                    <button type="button" tapmode="" onclick="register();"
                        class="btn btn-primary btn-action">监听红外</button>
                </div>
                <div class="col-4">
                    <button type="button" tapmode="" onclick="unregister();"
                        class="btn btn-primary btn-action">取消监听</button>
                </div>
            </div>




        </div>


        <div id="mylabel1" class="mylabel1">
            <h5 class="text-center">上海xxxx金属制品有限公司</h5>
            <div class="row">
                <div class="col-6 labeltxt"><span class="title">物料号：</span>2022-02399494</div>
                <div class="col-6 labeltxt"><span class="title">工单号：</span>006620</div>
                <div class="col-6 labeltxt"><span class="title">客料号：</span>2022-02399494</div>
                <div class="col-6 labeltxt"><span class="title">数量：</span>100</div>
                <div class="col-6 labeltxt"><span class="title">批次号：</span>220831</div>
                <div class="col-6 labeltxt"><span class="title">版本：</span>A</div>
                <div class="col-12">
                    <div class="qrcode1" id="qrcode1"></div>
                </div>
                <div class="col-12 labeltxt text-center">
                    PR-2022-192019013
                </div>
            </div>

        </div>


        <div id="mylabel2" class="mylabel2">

            <svg id="barcode"></svg>
            <div class="row">
                <div class="col-12 labeltxt"><span class="title">工单号：</span>2022-02399494</div>
                <div class="col-12 labeltxt"><span class="title">批次号：</span>006620</div>
                <div class="col-12 labeltxt"><span class="title">物料号：</span>2022-02399494</div>
                <div class="col-12 labeltxt"><span class="title">版本：</span>A</div>

            </div>

        </div>


        <div id="mylabel3" class="mylabel3">

            <div class="row">
                <div class="col-12 labeltxt"><span id="partdesc" class="title">上海xxxx金属制品有限公司</span></div>
            </div>
            <svg id="barcode2"></svg>
            <div class=" labeltxt text-center">
                PR-2022-192019013
            </div>
            <div class="row">
                <div class="col-12 labeltxt"><span class="title">LOT：</span>006620</div>
                <div class="col-6 labeltxt"><span class="title">COO：</span></div>
                <div class="col-6 text-right labeltxt"><span class="title">QTY：</span>1</div>

            </div>

        </div>



    </div>
</body>

<script type="text/javascript" src="script/base64.js"></script>
<script type="text/javascript" src="script/JsBarcode.all.min.js"></script>
<script type="text/javascript" src="script/qrcode.min.js"></script>
<script type="text/javascript" src="script/html2canvas.min.js"></script>
<script type="text/javascript" src="script/vue.min.js"></script>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        //back_listen();
        //getlan();
        app.customapi = "192.168.1.89";
        var checkkey = localStorage.getItem('lkey');
        app.checkkey = checkkey ? checkkey : 'en-hk';
        api.addEventListener({
            name: 'infrared_scanning'
        }, function (ret, err) {
            alert(JSON.stringify(ret));
            console.log(JSON.stringify(ret));
            //ret.value.str
        });
    }
    const app = new Vue({
        el: '#app',
        data: {
            checkkey: 'en-hk',
            customapi: '',
        },
        mounted() {
            init_qrcode();
        },
        methods: {

        }
    });


    function init_qrcode() {
        // setting = get_prefs_data('setting');
        var qrcode = new QRCode(document.getElementById("qrcode1"), {
            width: 250,
            height: 250,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        qrcode.makeCode("PR-2022-192019013");


        JsBarcode("#barcode", "PR-2022-192019013", { height: 100, displayValue: false });
        JsBarcode("#barcode2", "PR-2022-192019013", { height: 100, displayValue: false });

        /*

        JsBarcode("#barcode", "PR-2022-192019013", {
            format: "pharmacode",
            height: 40,
            displayValue: false
        });
        */

    }

    function register() {
        var moduleTsc = api.require('moduleZebra');
        moduleTsc.register({}, function (ret, err) {

        });
    }

    function unregister() {
        var moduleTsc = api.require('moduleTsc');
        moduleTsc.unregister({}, function (ret, err) {

        });
    }


    function shareapp() {
        $("#mylabel1").attr("class", "mylabel1 mylbshow");
        $("#mylabel1").trigger("click");
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0


        html2canvas(document.querySelector("#mylabel1")).then(function (canvas) {

            var bsimg = convertCanvasToImage(canvas);
            var k = bsimg.replace(/^.*?,/, '');
            var param = {};
            param.bsimg = k;
            $("#mylabel1").attr("class", "mylabel1");
            wifiprint(1, k, 1)
            console.log(k);

        });



    }

    function shareapp2() {
        $("#mylabel2").attr("class", "mylabel2 mylbshow");
        $("#mylabel2").trigger("click");
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0


        html2canvas(document.querySelector("#mylabel2")).then(function (canvas) {

            var bsimg = convertCanvasToImage(canvas);
            var k = bsimg.replace(/^.*?,/, '');
            var param = {};
            $("#mylabel2").attr("class", "mylabel2");
            param.bsimg = k;
            wifiprint(2, k, 1)
            console.log(k);

        });



    }


    function shareapp3() {
        $("#mylabel3").attr("class", "mylabel3 mylbshow");
        $("#mylabel3").trigger("click");
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0

        var nl = 2400/api.screenWidth;
        nl = nl.toFixed(0);

      


        html2canvas(document.querySelector("#mylabel3"), {scale:nl}).then(function (canvas) {

            var bsimg = convertCanvasToImage(canvas);
            console.log(bsimg);
            var k = bsimg.replace(/^.*?,/, '');
            var param = {};
            $("#mylabel3").attr("class", "mylabel3");
            console.log(k);

            param.bsimg = k;
            wifiprint2(2, k, 1)
           
        });



    }


    function wifiprint2(type, imgstr, num) {

var moduleTsc = api.require('moduleZebra');
moduleTsc.print({ "type": type, "imgstr": imgstr, "print_num": num }, function (ret, err) {
    console.log("wifiprint2:"+JSON.stringify(ret));
    if (ret) {
        if (ret.status == 1) {
            api.alert({
                title: 'Tips',
                msg: '成功发送打印指令',
            }, function (ret, err) {

            });
        } else {
            errMassage(ret.msg)
        }
    }
});
}



    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/jpg");
        return image.src;
    }



    function wifiprint(type, imgstr, num) {

        var moduleTsc = api.require('moduleTsc');
        moduleTsc.print({ "type": type, "imgstr": imgstr, "print_num": num }, function (ret, err) {
            if (ret) {
                if (ret.status == 1) {
                    api.alert({
                        title: 'Tips',
                        msg: '成功发送打印指令',
                    }, function (ret, err) {

                    });
                } else {
                    errMassage(ret.msg)
                }
            }
        });
    }


    function connect11() {

        

        var moduleTsc = api.require('moduleZebra');
        moduleTsc.connect({ "mac": "00:07:4D:E5:45:D3" }, function (ret, err) {
            console.log("wifiprint2:"+JSON.stringify(ret));
            if (ret) {
                if (ret.status == 1) {
                    api.alert({
                        title: 'Tips',
                        msg: '连接成功',
                    }, function (ret, err) {

                    });
                }
                if (ret.status == 2) {
                    errMassage(ret.msg)
                }
            }
        });



    }


    function connect() {

        var customapi1 = $("#api").val();

        if (customapi1 == '') {
            api.toast({
                msg: "请输入打印机ip",
                location: 'middle'
            });
            return false;
        }

        var moduleTsc = api.require('moduleTsc');
        moduleTsc.connect({ "ip": customapi1, "port": 9100 }, function (ret, err) {
            if (ret) {
                if (ret.status == 1) {
                    api.alert({
                        title: 'Tips',
                        msg: '连接成功',
                    }, function (ret, err) {

                    });
                }
                if (ret.status == 2) {
                    errMassage(ret.msg)
                }
            }
        });



    }
</script>

</html>